import { StackNavigator, TabNavigator } from 'react-navigation';
import React, { Component } from 'react';
import { Alert, Platform, StyleSheet, Text, View, Image, Button, ScrollView, TouchableHighlight, PixelRatio, TextInput } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import NetUtils from './NetUtils';


import Storage from 'react-native-storage';
import { AsyncStorage } from 'react-native';

var storage = new Storage({
    size: 100,
    storageBackend: AsyncStorage,
    defaultExpires: null,
    enableCache: true,
})
// 全局变量
global.storage = storage;
var url = 'http://119.29.13.173:8000/api';
var opts ={};
class LoginScreen extends React.Component {
	static navigationOptions = {
		header: null,
	};
	constructor(props) {
        super(props);
        this.state = {
        	username:'',
        	password:'',
        };
        global.storage.save({
	                    key:'token',
	                    data: {},
	                    expires: null
	                });
    }

	render() {
		console.log(global.storage);
		const {navigate} = this.props.navigation;
	    return (
			<View style={styles.view}>
			  <View style={{alignItems:'center',marginTop:40,height:150,justifyContent:'center',alignItems:'center'}}>
				<View style={{width:120,height:120,borderRadius:120,backgroundColor:'white'}}>
				</View>
			  </View>
			  <View style={styles.editGroup}>
				<View style={styles.editView1}>
				  <TextInput
					style={styles.edit}
					underlineColorAndroid="transparent"
					onChangeText={(text) => this.setState({
		                username:text
		            })}
		            value={this.state.username}
					placeholder="用户名"
					maxLength={16}
					placeholderTextColor="#c4c4c4"/>
				</View>
				<View style={{height: 1/PixelRatio.get(), backgroundColor:'#c4c4c4'}}/>
				<View style={styles.editView2}>
				  <TextInput
					style={styles.edit}
					underlineColorAndroid="transparent"
					placeholder="密码"
					onChangeText={(text) => this.setState({
		                password:text
		            })}
		            value={this.state.password}
					maxLength={16}
					password={true}
					secureTextEntry={true}
					placeholderTextColor="#c4c4c4"/>
				</View>
				<View style={{marginTop:20, height:40}}>
				  <TouchableHighlight activeOpacity={1} underlayColor="#eee" onPress={this.pressLogin}>
				    <View style={styles.login}>
				      <Text style={{color:'white'}}> 登录 </Text>
					</View>
				  </TouchableHighlight>
				</View>
				<View style={styles.textButtonLine}>
				   <TouchableHighlight activeOpacity={1} underlayColor="#eee" onPress={()=>this.forget()}>
				     <View><Text>忘记密码?</Text></View>
				   </TouchableHighlight>
				   <TouchableHighlight activeOpacity={1} underlayColor="#eee" onPress={()=>navigate('SignUp')}>
                     <View><Text>注册账号</Text></View>
				   </TouchableHighlight>
				</View>
			  </View>
			</View>
		)
	}
	forget() {
		alert("我忘了密码");
	}
	pressLogin = () => {
        const {navigate} = this.props.navigation;
        var service = 'login';
        opts = {
            username:this.state.username,
            password:this.state.password,
        };
        //navigate('Main');
        //登录检测
        NetUtils.post(url,service,opts, (data) => {
        			if (data.status === 200){
        				global.storage.save({
	                    key:'token',
	                    data: opts,
	                    expires: null
	                });
        				navigate('Main');
        			}
        			else alert('账号或密码错误！');
                    });
    };
}

const styles = StyleSheet.create({
	view: {
        flex: 1,
    },
	editGroup:{
        margin: 20,
    },
	editView1:{
        height: 48,
        backgroundColor:'white',
        justifyContent: 'center',
        borderTopLeftRadius: 3,
        borderTopRightRadius: 3,
    },
    editView2:{
        height: 48,
        backgroundColor:'white',
        justifyContent: 'center',
        borderBottomLeftRadius: 3,
        borderBottomRightRadius: 3,
    },
	editView3:{
        height: 48,
        backgroundColor:'white',
        justifyContent: 'center',
        borderBottomLeftRadius: 3,
        borderBottomRightRadius: 3
    },
	textButtonLine:{
        marginTop: 12,
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
	edit:{
        height: 40,
        fontSize: 13,
        backgroundColor: '#fff',
        paddingLeft: 15,
        paddingRight: 15,
    },
	login:{
		backgroundColor:'blue',
		height:35,
		borderRadius:5,
		marginLeft:5,
		marginRight:5,
		justifyContent:'center',
		alignItems: 'center',
	},
});

export default LoginScreen;